<template>
    <div class="big">
        <div class="nr">
            <div class="bt">
                UNI-ADMIN
            </div>
            <div class="bg">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                    class="demo-ruleForm">
                    <el-form-item prop="pass">
                        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"
                            placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="checkPass">
                        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"
                            placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">立即登入</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { login } from '@/common/api';

export default {
    data() {
        var checkAge = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('年龄不能为空'));
            }
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    if (value < 18) {
                        callback(new Error('必须年满18岁'));
                    } else {
                        callback();
                    }
                }
            }, 1000);
        };
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                pass: '',
                checkPass: '',
            },
            rules: {
                pass: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        async submitForm(formName) {


            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    if (this.ruleForm.pass && this.ruleForm.checkPass) {
                        let res = await login({ username: this.ruleForm.pass, password: this.ruleForm.checkPass })
                        if (res.statusText == 'OK') {
                            this.$store.commit('settoken', res.data.data.token)
                            this.$store.commit('setTreelist', res.data.data.tree)
                            console.log(res.data.data.token);
                            this.$router.push('/')
                        }
                    }
                }
            });

        }
    }

}

</script>

<style  >
.big {
    height: 250px;
    width: 500px;
    margin: 0 auto;
    border: 1px solid rgb(208, 206, 206);
}

.nr {
    width: 100%;
    height: 100%;
    padding-right: 80px;
    box-sizing: border-box;
}

.bt {
    width: 100%;
    height: 50px;
    font-size: 20px;
    line-height: 50px;

}

.bg {
    margin-top: 10px;
}

.el-input {
    width: 500px;
    height: 40px;
}

.el-button {
    width: 400px;
    background: rgb(62, 109, 8);
}
</style>